<template>
    <div>
        <el-row>
            <el-col span="6" v-for="item in goodsList" :key="item.id" id="goodsCard">
            <el-card style="margin: 5px; height: 500px;" shadow="hover">
                <img :src="item.pic" class="image">
                <div>
                    <el-descriptions :title="item.goodsName">
                        <el-descriptions-item label="💰积分">{{item.price}}</el-descriptions-item>
                        <el-descriptions-item label="🎫库存">{{item.num}}</el-descriptions-item>
                        <el-descriptions-item label="🎍关联">{{getFlowerById(item.flowerId)}}</el-descriptions-item>
                        <el-descriptions-item label="🎨详情">{{item.details}}</el-descriptions-item>
                    </el-descriptions>
                    <div class="bottom clearfix">
                        <el-button type="primary" class="button" @click="createOrder(item.id)">🛒我要兑换</el-button>
                    </div>
                </div>
            </el-card>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>

import ShopGoodsApi from '../../api/shop/shopGoodsApi';
import HomeFlowerApi from '../../api/home/homeFlower'

export default {
    data() {
        return {
            goodsList: [],
            flowerList: []
        }
    },
    methods: {
        getAllGoods() {
            ShopGoodsApi.getAllGoods()
            .then(res => {
                this.goodsList = res.data.data
            })
        },
        getAllFlower() {
            HomeFlowerApi.getAllFlower()
            .then(res => {
                this.flowerList = res.data.data
            })
        }, 
        createOrder(id) {
            ShopGoodsApi.getOrder(id)
            .then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message);
                } else {
                    console.log(res)
                    this.$message.error(res.data.message);
                }
            }).catch(res => {
                this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")                
            })
        } 
    },
    created() {
        this.getAllGoods()
        this.getAllFlower()
    },
    computed: {
        //跟据id获取flower
        getFlowerById() {
            return id => {
                const item = this.flowerList.find(item => item.id === id)
                return item ? item.flowerName : ''
            }
        },
    },
}
</script>

<style scoped>
.image{
    width: 100%;
    height: 300px;
}
.bottom {
    margin-top: 0px;
    line-height: 12px;
  }

  .button {
    padding: 5px;
    float: right;

  }

</style>